<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>输入框事件</title>
  </head>
  <body>
    <input type="text" />

    <script>
      const inp = document.querySelector('input')
      console.log(inp)

      // 1.获取焦点: focus -- 光标在内部闪烁
      inp.onfocus = function () {
        console.log('获得焦点')
      }

      // 2.失去焦点: blur -- 光标消失
      inp.onblur = function () {
        console.log('失去焦点')
      }

      // 3.输入框内容变化: change
      // 触发方式: 1.输入框内容有变化  2.失去焦点时
      inp.onchange = function () {
        // 输入框的value属性,存放其值
        console.log('输入框内容变化:', this.value)
      }

      // 4. `实时`变化监听: oninput
      inp.oninput = function () {
        // console.log(this.value)
      }

      // 5.键盘事件: 例如 按回车  keydown按下 keyup抬起 keypress整个操作

      // 固定设定: 事件触发的函数, 接收一个参数, 就是事件相关的信息
      inp.onkeyup = function (e) {
        // console.log(arguments)
        // console.log('键盘操作')
        if (e.keyCode == 13) {
          console.log(e) // 相当于 arguments[0]
          console.log('回车按钮事件')
        }
      }
    </script>
  </body>
</html>
